var CardForm = function () {
  var CardFormModel = function (card) {
    BaseModel.call(this);
    var self = this;

    var fn = {
      initData: function (card) {
        if (card === undefined) {
          card = {
            status: 1
          };
        }

        var fields = ['internetThingsCard', 'company', 'terminalUser', 'status', 'terminalDevice',
          'deviceType', 'upperComputer', 'id'
        ];
        self.setDataFromObj(card, fields, '');
        self.properyList = fields;
      }
    };

    this.checkValid = function () {
      var fields = ['internetThingsCard'];
      return CheckVaildUtil.checkNullField(fields, this);
    };

    this.getObject = function (type) {
      var fields = ['internetThingsCard', 'status'];
      var postData = {};
      this.setPostData(postData, fields);

      if (type !== 'add') {
        postData.id = this.id;
      }
      return postData;
    }

    fn.initData(card);
  };

  var template = /* html */ `
    <div class="card-form" v-loading.fullscreen.lock="loading">
      <el-form label-width="auto">
        <el-form-item label="物联网卡ID" :required="type==='add'">
          <el-input v-if="type==='add'" v-model="cardForm.internetThingsCard"></el-input>
          <span v-else>{{cardForm.internetThingsCard}}</span>
        </el-form-item>
        <template v-if="type==='update'">
          <el-form-item label="使用公司">
            <span>{{cardForm.company}}</span>
          </el-form-item>
          <el-form-item label="终端用户">
            <span>{{cardForm.terminalUser}}</span>
          </el-form-item>
        </template>
        <el-form-item label="状态">
          <el-select class="form-input" v-model="cardForm.status">
            <el-option v-for="status in statusList" :key="'status_'+status.value" :value="status.value" :label="status.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div style="text-align:center">
        <el-button type="primary" @click="ensure">
          <span>{{type==='add'?'新增':'修改'}}</span>
        </el-button>
      </div>
    </div>
  `;

  return {
    props: {
      card: Object,
      type: {
        type: String,
        default: 'add'
      }
    },

    data: function () {
      return {
        loading: false,
        cardForm: this.getCardForm(),
        statusList: i18n.getDropDown('remoteEquipment.status', [1, 0])
      };
    },

    methods: {
      getCardForm: function () {
        var type = this.type;
        var cardForm;
        if (type === 'add') {
          cardForm = new CardFormModel();
        } else {
          cardForm = new CardFormModel(this.card);
        }
        return cardForm;
      },

      ensure: function () {
        var cardForm = this.cardForm;
        var code = cardForm.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`remoteEquipment.error.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        var type = this.type;
        var postData = cardForm.getObject(type);
        if (type === 'add') {
          this.toAddCard(postData);
        } else {
          this.toUpdateCard(postData);
        }
      },

      toAddCard: function (postData) {
        this.loading = true;
        var self = this;
        ajaxRequest('internetThingCard/addInternetThingCard', postData).then(function () {
          self.$alert('物联网卡新增成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      toUpdateCard: function (postData) {
        this.loading = true;
        var self = this;
        ajaxRequest('internetThingCard/updateInternetThingCard', postData).then(function () {
          self.$alert('物联网卡修改成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
